<template>
  <vxe-modal
    title="查看设备维修详情"
    v-model="dialogVisible"
    v-if="dialogVisible"
    :loading="loading"
    width="70%" showFooter esc-closable show-zoom resize>

    <div style="height: 75vh; overflow-y: auto;">
      <el-card class="box-card" shadow="never" :body-style="{ padding: '10px',backgroundColor: '#bfcdda' }">
        <!-- 设备维修记录基本信息 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">设备维修记录基本信息</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  维修时间：
                </div>
              </template>
              {{ sbWxJlData.wxTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  维修价格：
                </div>
              </template>
              {{ sbWxJlData.wxJg }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  设备名称：
                </div>
              </template>
              <el-link @click="handleButtonClick(sbWxJlData)" style="font-weight: 600" type="primary"> {{ sbWxJlData.sbName }} </el-link>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  出厂编号：
                </div>
              </template>
              {{ sbWxJlData.ccBh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  自编号：
                </div>
              </template>
              {{ sbWxJlData.zbh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  固定资产编号：
                </div>
              </template>
              {{ sbWxJlData.gdZcBh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  维修原因：
                </div>
              </template>
              {{ sbWxJlData.wxYy }}
            </el-descriptions-item>

          </el-descriptions>
        </el-card>
        <br>
        <!-- 设备维修附件资料 -->
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">设备维修附件资料</span>
          </div>
          <el-table :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    height="45vh" :data="sbwxjlFjList">
            <!--            <el-table-column type="selection" width="50" align="center"/>-->
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column show-overflow-tooltip label="文件名称" align="center" prop="fileName" :formatter="getFileNames"/>
            <el-table-column label="文件大小" align="center" prop="fileSize"/>
            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handlePreview(scope.row)"
                >预览
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-download"
                  @click="handleDownload(scope.row)"
                >下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-card>
    </div>
    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button @click="dialogVisible=false">关闭</el-button>
    </div>

    <!-- 预览组件 -->
    <KkFileView ref="preview"/>

    <!-- 设备详情 -->
    <SbXq ref="sbXq"/>
  </vxe-modal>
</template>
<script>
import {getSbwxjl} from "@/api/sbgl/sbwxjl";
import KkFileView from "@/views/components/KKFileView/kkFileView.vue";
import SbXq from "@/views/sbgl/sbxxgl/components/SbXq.vue";

export default {
  name: "SbWxJlXq",
  components: {SbXq, KkFileView},
 //设备维修记录详情界面
  dicts: ['sbdb_dbzt'],
  data() {
    return {
      sbwxjlId: null, //设备维修记录主键ID
      loading: false,
      sbWxJlData: [], //设备维修记录基本信息
      sbwxjlFjList: null, //设备维修记录附件
      dialogVisible: false,
      content_style: {
        // 解决不对齐的问题
        'width': "400px",
        // 排列第二行
        'word-break': 'break-all',
        // 'background-color': '#f3f7ff'
      },
      label_style: {
        // 解决不对齐的问题
        'width': "250px",
        // 排列第二行
        'word-break': 'break-all',
        'background-color': '#F0F8FF'
      },
    };
  },
  created() {
  },
  methods: {
    // 查询设备详情信息
    handleButtonClick(row) {
      this.$refs.sbXq.handleOpen(row);
    },
    // 打开预览组件
    handlePreview(row) {
      this.$refs.preview.handleOpen(row);
    },
    // 文件下载处理
    handleDownload(row) {
      const resource = row.fileName;
      // 默认方法
      this.$download.resource(resource);
    },
    // 获取文件名原名
    getFileNames(row) {
      // 从路径中提取文件名
      return row.fileName.split('/').pop(); // 返回文件名部分
    },
    handleOpen(row) {
      this.loading = true;
      this.sbwxjlId = row.sbwxjlId
      this.dialogVisible = true
      this.getWzRkData()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    //获取详情数据
    getWzRkData() {
      const sbwxjlId = this.sbwxjlId
      getSbwxjl(sbwxjlId).then(res => {
        this.sbWxJlData = res.data
        this.sbwxjlFjList = res.data.sbwxjlFjList;
      })
    },

  }
};
</script>

<style scoped>
.right-align-label {
  text-align: right;
}

/* 定义表头中特定类名的文本居中 */
.el-table .custom-header .cell {
  text-align: center !important;
}
/* header 头部背景 */
/deep/ .el-card__header {
  padding: 3px 7px 3px;
  min-height: 10px;
  background-color: aliceblue;
}
</style>
